<template>
	<view class="flex-column">
		<view class="header flex-column">
			<view class="line">
				<view class="martinKey">操作类型</view>
				<view class="martinValUp" v-if="martinPara.direction=='BUY'">铁三角买入</view>
				<view class="martinValDown" v-else>铁三角卖出</view>

			</view>
			<view class="line">
				<view class="martinKey">币对</view>
				<view class="martinValUp" v-if="martinPara.direction=='BUY'">
					{{martinPara.instrumentId}}
				</view>
				<view class="martinValDown" v-else>
					{{martinPara.instrumentId}}
				</view>

			</view>
			<view class="line">
				<view class="martinKey">最高价</view>
				<view class="martinValUp" v-if="martinPara.direction=='BUY'">{{martinPara.high}}</view>
				<view class="martinValDown" v-else>{{martinPara.high}}</view>
			</view>
			<view class="line">
				<view class="martinKey">最低价</view>
				<view class="martinValUp" v-if="martinPara.direction=='BUY'">{{martinPara.low}}</view>
				<view class="martinValDown" v-else>{{martinPara.low}}</view>
			</view>
			<view class="line">
				<view class="martinKey">数量</view>
				<view class="martinValUp" v-if="martinPara.direction=='BUY'">{{martinPara.mount}}</view>
				<view class="martinValDown" v-else>{{martinPara.mount}}</view>
			</view>
		</view>
		<view class="result flex-column">
			<view class="line">
				<view class="martinKey">单量</view>
				<view class="martinValUp" v-if="martinPara.direction=='BUY'">{{orderSize}}</view>
				<view class="martinValDown" v-else>{{orderSize}}</view>
			</view>
			<view class="line">
				<view class="martinKey">预估价值</view>
				<view class="martinValUp" v-if="martinPara.direction=='BUY'">{{martinResp==null?0:martinResp.floorValue}}</view>
				<view class="martinValDown" v-else>{{martinResp==null?0:martinResp.floorValue}}</view>
			</view>
			<view class="line">
				<view class="martinKey">成本均价</view>
				<view class="martinValUp" v-if="martinPara.direction=='BUY'">{{martinResp==null?0:martinResp.floorAvgPrice}}</view>
				<view class="martinValDown" v-else>{{martinResp==null?0:martinResp.floorAvgPrice}}</view>
			</view>
		</view>
		<view class="uni-column" style="min-height: 40vh;" v-if="martinResp!=null&&martinResp.statusFloors!=null">
			<view class="uni-column" v-for="(item,index) in martinResp.statusFloors" :key="index" style="margin-top: 10upx;">
				<!-- <view class="pagoda-name" v-if="previewType=='pagoda'">宝塔第{{index}}层</view>
				<view class="pagoda-name" v-else-if="previewType=='split'">夹板开{{item.martin.direction=='BUY_LONG'?'多':'空'}}</view> -->				
				<contract-floor class="uni-column" style="display: flex;" :floor="item"></contract-floor>
			</view>
		</view>
		<view class="uni-flex" style="min-height: 40vh;" v-else>
			<view class="martin-order pmain" v-if="martinResp!=null">
				<view class="item">
					<text class="price">委托价格</text>
					<text class="num">委托数量</text>
				</view>
				<view class="item uni-down" v-for="(item,index) in martinResp.floorOrders" :key="index">
					<text class="price">{{item.price}}</text>
					<text class="num">{{item.mount}} 个</text>
				</view>
			</view>
			<view class="martin-order pmain" v-else>
				<view class="item">
					<text class="price">委托价格</text>
					<text class="num">委托数量</text>
				</view>
			</view>	
		</view>
		<view @click="createMartinOrder">
			<button class="btn uni-bg-up" style="margin-top: 5px;" v-if="martinPara.direction=='BUY'">一键买入</button>
			<button class="btn uni-bg-down" style="margin-top: 5px;" v-else-if="martinPara.direction=='SELL'">一键卖出</button>
		</view>
	</view>
</template>

<script>
	import contractFloor from "@/components/contractFloor.vue"
	var _self;
	export default {
		components: {
			contractFloor
		},
		data() {
			return {
				martinPara: null,				
				martinResp: null,
				previewType: '',
			}
		},
		onLoad(e) {
			_self = this
			_self.previewType = e.previewType
			_self.martinPara = JSON.parse(e.martinPara)
			console.log("onload martin " + JSON.stringify(e))			
			_self.createTempMartinOrder()
		},
		methods: {
			//===============api action start========================//
			createTempMartinOrder() {
				console.log("createTempMartinOrder")
				console.log(_self.martinPara)
				uni.request({
					url: _self.api + '/spots/'+this.previewType,
					method: 'POST',
					header: {
						"Authorization": "Bearer " + _self.getToken()
					},
					data: _self.martinPara,
					success: res => {
						console.log("createTempMartinOrder result")
						console.log(res.data.data)
						_self.martinResp = res.data.data
					}
				});
			},
			createMartinOrder() {
				console.log("createMartinOrder")
				console.log(_self.martinResp.floorTempId)
				uni.showLoading({
					mask: true,
					title: "加载中..."
				})
				uni.request({
					url: _self.api + '/spots/orders/margin?floorTempId=' + _self.martinResp.floorTempId,
					method: 'POST',
					header: {
						"Authorization": "Bearer " + _self.getToken()
					},
					data: {},
					success: res => {
						console.log("createMartinOrder result")
						console.log(res.data.data)
						_self.martinResp = res.data.data
						uni.$emit("spotOrderFresh")
					},
					complete() {
						uni.hideLoading()
						uni.$emit('positionFresh')
						if (_self.tickerTimer != null)
							clearInterval(_self.tickerTimer);
						uni.navigateBack({
							delta: 1
						})
					}
				});
			}
			//===============api action end========================//
		},
		computed: {
			orderSize() {
				if (_self.martinResp == null) return 0
				return _self.martinResp.floorOrders.length
			}
		}	
	}
</script>

<style>
	/* view {
		border: #000000 1px solid;
	} */

	.header {
		height: 150upx;
		background-color: #FEF0B7;
		width: 100%;
	}

	.result {
		height: 90upx;
		background-color: #EEFFC5;
		width: 100%;
		border-top: #D76A00 1px solid;
	}

	.line {
		height: 30upx;
		justify-content: flex-start;
		width: 100%;
		display: flex;
		padding-left: 20upx;
		display: flex;
		flex-direction: row;
	}

	.martinKey {
		font-size: 20upx;
		color: #918F8F;
		line-height: 30upx;
	}

	.btn {
		height: 74upx;
		line-height: 74upx;
		color: #fff;
		font-size: 28upx;
		font-weight: bold;
		margin-top: 30upx;
	}

	.martinValUp {
		font-size: 20upx;
		margin-left: 20upx;
		color: #00B48E;
		line-height: 30upx;
		font-weight: bold;
	}

	.martinValDown {
		font-size: 20upx;
		margin-left: 20upx;
		color: #D14B64;
		line-height: 30upx;
		font-weight: bold;
	}

	.martin-order {
		display: flex;	
		width: 100%;
		flex-direction: column;
		background-color: #DADADA;
	}	

	.pmain .item {
		position: relative;
		width: 100%;
		display: flex;
		font-size: 24upx;
		padding-left: 20upx;
	}

	.pmain .item .bg {
		height: 100%;
		position: absolute;
		top: 0;
		right: 0;
		z-index: -9999;
	}

	.pmain .item .buybg {
		background: #fdf4f7;
	}

	.pmain .item .sellbg {
		background: #f0faf9;
	}

	.pmain .item .price {
		display: block;
		width: 50%;
		text-align: left;
	}

	.position .item .num {
		display: block;
		width: 50%;
		text-align: right;
		padding-right: 10upx;
	}

	.pmain .current-price {
		margin: 10upx 0;
	}

	.pmain .current-price .usdt {}

	.pmain .depth {
		position: relative;
		margin-top: 10upx;
		margin-right: 10upx;
	}

	.pmain .depth .uni-h6 {
		text-align: center;
		height: 60upx;
		line-height: 60upx;
	}

	.pmain .depth .popover {
		position: absolute;
		top: 80upx;
		width: 100%;
		z-index: 9999999999;
		background: #ffffff;
		display: inline-block;
		border-radius: 20px;
	}

	.pmain .depth .popover .item {
		width: 100%;
		height: 60upx;
		line-height: 60upx;
		display: block;
		text-align: center;
	}

	.pmain .depth .kailong {
		position: absolute;
		left: 50%;
		top: 74upx;
		transform: translate(-50%, -50%);
		max-width: 50%;
		width: 0;
		height: 0;
		border-right: 20px solid transparent;
		border-left: 20px solid transparent;
		border-bottom: 20px solid #E0E0E0;
	}

	.popover-wrap .uni-thinner-border:before {
		border-radius: 15px !important;
	}
</style>
